<template>
  <div class="content flex">
    <div class="left flex1"></div>
    <div class="right flex1 flex_c">
      <div class="login_box">
        <div class="flex_btw fs18 login_tab">
          <div
            class="mr50 login_d pb10"
            @click="changeTab(0)"
            :class="{ login_a: acTab === 0 }"
          >
            平台用户
          </div>
          <div
            class="login_d pb10"
            @click="changeTab(1)"
            :class="{ login_a: acTab === 1 }"
          >
            企业用户
          </div>
        </div>
        <el-form :model="form" label-width="auto" class="mt30" size="large">
          <el-form-item v-if="acTab === 1">
            <el-input v-model="form.name" :suffix-icon="OfficeBuilding" placeholder="请输入企业编码" />
          </el-form-item>
          <el-form-item>
            <el-input v-model="form.name" :suffix-icon="User" placeholder="请输入用户名" />
          </el-form-item>
          <el-form-item>
            <el-input v-model="form.name" :suffix-icon="Lock" placeholder="请输入密码"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" style="width: 100%;">立即登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { User, Lock,OfficeBuilding } from "@element-plus/icons-vue";
const acTab = ref<number>(0);
const changeTab = (value: number) => {
  acTab.value = value;
};
const form = reactive({
  name: "",
});
</script>
<style scoped lang="scss">
.content {
  width: 100%;
  height: 100%;
  background: url("../assets/images/loginBg.jpg") no-repeat;
  background-size: cover;
  background-position: center center;
}
.login_box {
  width: 240px;
  .login_tab {
    font-weight: 500;
    padding-bottom: 8px;
  }
  .login_d {
    color: rgba(0, 0, 0, 0.65);
    cursor: pointer;
  }
  .login_a {
    color: rgba(25, 137, 250, 1);
    border-bottom: 2px solid rgba(25, 137, 250, 1);
  }
}
</style>
